<template>
  <!-- @focus="focusCustomer"
        @blur="blurCustomer" -->
  <div>
    <div class="inputInfo">
      <!-- 上部的搜索框 -->
      <van-search
        v-model="searchcursom"
        shape="round"
        background="#cea461"
        placeholder="请输入你想要的蛋糕"
        @search="search"
        class="inputInfo"
        @input="qili"
      />
      <!-- 下部的提示的搜索内容 -->
      <ul v-if="searchcursom">
        <li
          @click="jump"
          v-for="(item, index) in prompt_box_record"
          :key="index"
        >
          {{ item.cakename }}
          <!-- 蛋糕的口味 -->
          <!-- <span>{{ item.description }}</span> -->
        </li>
      </ul>
    </div>

    <!-- 历史记录 -->
    <div class="history">
      <div>
        <h4>历史记录</h4>
        <span @click="deletes" class="iconfont">&#xe600;</span>
      </div>
      <ul>
        <li
          @click="jump"
          v-for="(item, index) in history"
          :key="index"
          :v-model="(items = item)"
        >
          {{ item.content }}
        </li>
      </ul>
    </div>
    <!-- 热门搜索 -->
    <div class="hot">
      <div>
        <h4>热点词条</h4>
        <!-- 刷新按钮 -->
        <span @click="refresh" class="iconfont">&#xe641;</span>
      </div>
      <ul>
        <li
          @click="jump"
          :v-model="(items = item)"
          v-for="(item, index) in hotspot"
          :key="index"
        >
          {{ item.cakename }}
        </li>
      </ul>
    </div>
    </div>
</template>

<script>
//防抖的定时器
let time = null;
export default {
  data() {
    return {
      // 存放的搜索框的内容
      searchcursom: null,
      //历史记录的值全部数据
      history: [],
      //热点词条的全部数据
      hotspot: ["似的发射点"],
      // 这个是历史记录的值
      items: "",
      //判断弹出框的提示框
      prompt: false,
      // 提示框的所有的记录
      prompt_box_record: [],
      //token的值
      tokens: null,
    };
  },
  // 获取的到所有的热点词条显示
  created() {
    // 导入可以刷新的热点数据
    this.$get("/v1/search/hotspot").then((res) => {
    //console.log(res.data.data);
      this.hotspot = res.data.data;
    });
    let token = localStorage.getItem("token");
    this.tokens = token;
    //导入历史记录
    let params = { token: this.tokens };
    this.$get("/v1/search/history", params).then((res) => {
    //console.log("sdfasdfsdfd");
      this.history = res.data.data;
    });
  },
  methods: {
    // 搜索框事件
    search() {
      let params = { searchcursom: this.searchcursom, token: this.tokens };
      this.$get("/v1/search/content", params).then((res) => {
      //console.log(res);
      });
      // 判断是不是一个有效的搜索
      let contents = { contents:this.searchcursom };
      this.$get("/v1/search/yes_no", contents).then((res) => {
      //console.log(res.data.msg);
        if(res.data.msg=="没有检测到"){
       this.$router.push(`/cant_find`);
        }else{
       this.$router.push(`/detail?name=${this.searchcursom}`);
       this.history.unshift(this.searchcursom);
      this.searchcursom = null;
        }
      });
      
    },
    // // 进入搜索框chufa
    // focusCustomer() {
    //   this.prompt = true;
    // },
    qili() {
      if (time) {
        clearTimeout(time);
      }
      time = setTimeout(() => {
        // 导入模糊查询的数据
        this.$get(`/v1/search/vague?name=${this.searchcursom}`).then(
          (res) => {
          //console.log(res.data.data);
            this.prompt_box_record = res.data.data;
          }
        );
        time = null;
      }, 1000);
    },
    // //退出焦点模式
    // blurCustomer() {
    //   this.prompt = true;
    // },

    //跳转
    jump(e) {
      let names = e.srcElement.innerText;
          let contents = { contents:e.srcElement.innerText };
       this.$get("/v1/search/yes_no", contents).then((res) => {
      //console.log(res.data.msg);
        if(res.data.msg=="没有检测到"){
       this.$router.push(`/cant_find`);
        }else{
        this.$router.push(`/detail?name=${names}`);
        }
      });
    //console.log(names);
     
    },
    //确认删除信息
    deletes() {
      this.$dialog
        .confirm({
          message: "是否要删除全部",
        })
        .then(() => {
          // on confirm
          // 删除所有的历史记录
          let params = { token: this.tokens };
          this.$get("/v1/search/delete", params).then((res) => {
          //console.log(res.data.data);
            this.history = [];
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //点击刷新
    refresh() {
      // 导入可以刷新的热点数据
      this.$get("/v1/search/hotspot").then((res) => {
      //console.log(res.data.data);
        this.hotspot = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sdfsd{
  width: 100%;
  position:fixed;
  top: 50%;
  transform: translateY(-50%);

}
.sdfsd img{
  width: 100%;
}
.inputInfo {
  position: relative;
}
.inputInfo ul {
  overflow-y: auto;
  position: absolute;
  width: 100%;
  margin-top: 0.1rem;
  height: 10rem;
  background-color: white;
}
.inputInfo ul li {
  margin-top: 0.3rem;
  padding: 0.5rem;
}
.inputInfo ul li span {
  float: right;
  border-radius: 0.625rem;
  background-color: #f0f2f5;
  padding: 0.4rem;
  color: #3e3e3e;
  font-size: 0.9rem;
}
// <!-- 历史记录 -->
.history {
  margin-top: 1rem;
  padding: 0rem 1rem;
  height: 10rem;
  overflow-y: auto;
}
.history div {
  display: flex;
  justify-content: space-between;
  height: 1rem;
  line-height: 1rem;
}
.history ul {
  width: 100%;
}
.history ul li {
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 0.7rem;
  padding: 0rem 0.5rem;
  margin-right: 0.5rem;
  background-color: #ffe1a9;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #3e3e3e;
}
//热门搜索
.hot {
  width: 100%;
  height: 10rem;
  margin-top: 1rem;
  padding: 0rem 1rem;
}
.hot div {
  display: flex;
  justify-content: space-between;
  height: 2rem;
  line-height: 2rem;
}
.hot ul {
  width: 100%;
}
.hot ul li {
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 0.7rem;
  padding: 0rem 0.5rem;
  margin-right: 0.5rem;
  background-color: #ffe1a9;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #3e3e3e;
}
</style>
